<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在组件中共享数据——选项式</title>
</head>
<body>
<div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>

</div>

<template id="cpn">
    <h1>当前计数：{{ count }}</h1>
    <button v-on:click="decrement">-</button>
    <button v-on:click="increment">+</button>
    <br>
    <button v-on:click="reset">重置</button>
</template>

<script type="module">
    import {createApp, defineComponent} from "../../../../js/vue.esm-browser.js";
    import {createPinia, defineStore, storeToRefs} from "../../../../js/pinia.esm-browser.js";

    const pinia = createPinia()

    // 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
    // 第一个参数是你的应用中 Store 的唯一 ID。
    let useCounterStore = defineStore(
        "counter",
        {
            // 存储初始化的数据
            state: () => {
                return {count: 0}
            },
            getters: {},
            // 用来改变初始数据的操作，定义为函数形式
            actions: {
                increase() {
                    this.count++
                },
                decrease() {
                    this.count--
                }
            },
        }
    )

    let cpn1 = defineComponent(
        {
            template: "#cpn",
            setup() {
                let store = useCounterStore()
                console.log(store);

                // ❌ 这将不起作用，因为它破坏了响应性
                // 这就和直接解构 `props` 一样
                // let {count} = store
                let {count} = storeToRefs(store)

                console.log(count);

                function increment() {
                    store.increase()
                }

                function decrement() {
                    store.decrease()
                }

                function reset() {
                    store.$reset()
                }

                return {
                    count,
                    increment,
                    decrement,
                    reset,
                }
            }
        }
    );

    let cpn2 = defineComponent(
        {
            template: "#cpn",
            setup() {
                let store = useCounterStore()
                console.log(store);

                // ❌ 这将不起作用，因为它破坏了响应性
                // 这就和直接解构 `props` 一样
                // let {count} = store
                let {count} = storeToRefs(store)

                console.log(count);

                function increment() {
                    store.increase()
                }

                function decrement() {
                    store.decrease()
                }

                function reset() {
                    store.$reset()
                }

                return {
                    count,
                    increment,
                    decrement,
                    reset,
                }
            }
        }
    );

    let app = createApp(
        {
            setup() {
                return {}
            },
            components: {
                cpn1,
                cpn2,
            }
        }
    )

    app.use(pinia)
    app.mount("#app")
</script>
</body>
</html>